<include file="Footprint:header"/>
<include file="Footprint:share_header"/>
</head>
<div class="wrap">
    <include file="Activity:Footprint:popbox"/>
    <div class="top bg-color{BEESCRM:$class}">
        <div class="logobox fl-left" onclick="javascript:history.back()">
            <span class="iconfont icon-zuo"></span>
        </div>
        <div class="title title2 fl-left">
            <p>{BEESCRM:$color_value}·{BEESCRM:$theme}</p>
            <p class="gret-title">杭州城市品牌促进会</p>
        </div>
        <div class="rule fl-left" id="foot-rule">活动规则</div>
    </div>
    <p class="place-name">{BEESCRM:$data.name} <span class="iconfont icon-fenxiang fengxiang" id="share">分享</span></p>
    <div class="banner">
        <div id="wrapper">
            <div id="scroller" >
                <ul id="thelist">
                    <notempty name="data.Flash">
                        <volist name="data.Flash" id="f">
                            <li><p></p><a href="javascript:void(0)" ><img src="{BEESCRM:$f.pic_url}" title="{BEESCRM:$f.title}"/></a></li>
                        </volist>
                    </notempty>
                </ul>
            </div>
        </div>
        <notempty name="data.Flash">
            <div id="nav">
                <div id="prev" onclick="myScroll.scrollToPage('prev', 0,400,3);return false">&larr; prev</div>
                <ul id="indicator">
                    <volist name="data.Flash" id="vo" key="i">
                        <if condition="$i eq 1">
                            <li class="active">{BEESCRM:$key}</li>
                            <else/>
                            <li>{BEESCRM:$key}</li>
                        </if>
                    </volist>
                </ul>
                <div id="next" onclick="myScroll.scrollToPage('next', 0,400,3);return false">next &rarr;</div>
            </div>
        </notempty>
        <div class="clear"></div>
    </div>
    <p class="box">综合评分
        <if condition="$comment">
            <for start="0" end="$star.star">
                <span class="iconfont icon-xingxing star-y"></span>
            </for>
            <else/>
            <span class="iconfont icon-xingxing star-n"></span>
            <span class="iconfont icon-xingxing star-n"></span>
            <span class="iconfont icon-xingxing star-n"></span>
            <span class="iconfont icon-xingxing star-n"></span>
            <span class="iconfont icon-xingxing star-n"></span>
        </if>
    </p>
    <div class="chat clearfix">
        <if condition="$comment" >
            <div class="box clearfix" style="margin-bottom: 0;">
                <img class="comment-img fl-left" src="{BEESCRM:$comment.headimgurl}"/>
                <div class="comment-box fl-left">
                    <p></p>
                    <p class="comment">{BEESCRM:$comment.comment}</p>
                    <p class="time">{BEESCRM:$comment.create_time|date='Y-m-d',###}
                        <for start="0" end="$comment.star">
                            <span class="iconfont icon-xingxing star-y"></span>
                        </for>
                    </p>
                </div>
            </div>
            <a href="{BEESCRM::U('/Activity/Footprint/comment',array('wechat_id'=>$wechat_id,'act_id'=>$act_id, 'point_id' => $data['point_id']))}" class="more fl-left">查看更多</a>
            <else/>
            <div class="box clearfix" style="margin-bottom: 0;">
                <p>大家都在说</p>
                <p class="no-commend">这里还没有被评论哦~沙发抢抢抢起来！！</p>
            </div>
        </if>
    </div>

    <div class="tab clearfix">
        <span class="tab-list cur fl-left">简介</span>
        <span class="tab-list fl-left">地图</span>
    </div>
    <div class="tab-detail marginb-55">
        <p>{BEESCRM:$data.description}</p>
    </div>
    <div class="tab-detail marginb-55">
        <p>{BEESCRM:$data.map}</p>
    </div>
    <div class="btn-box">
        <if condition="$route eq 1">
            <a href="javascript:void(0)" class="btn fl-left bg-color8" id="isay">我来评论</a>
            <if condition="$time">
                <a href="javascript:void(0)" class="btn fl-left bg-color8" id="order">预约路线</a>
                <else/>
                <a href="javascript:void(0)" class="btn fl-left bg-color8">暂无可预约时间</a>
            </if>
            <else/>
            <a href="javascript:void(0)" class="btn fl-left bg-color8 big-btn" id="isay">我来评论</a>
        </if>
    </div>
    <!--<div class="pop-box" id="commend"></div>
    <div class="pop-box" id="appointment"></div>-->
    <div class="pop-box" id="only-cover"></div>
    <div class="pop clearfix" id="commend">
        <div class="prize picture white fl-left"><if condition="$firstFlash">
            <img src="{BEESCRM:$firstFlash}"/>
            <else/>
            <img src="/assets/activity/footprint/images/center-bg.jpg"/>
        </if>
        </div>
        <p class="prize-name fl-left">
            <span id="sumComment">评论（{BEESCRM:$star.num}）</span>
        </p>
        <span class="iconfont icon-guanbi guanbi"></span>
        <p class="grade fl-left">我来评分
            <input id="star" type="hidden" name="star" value="5" />
            <span class="iconfont icon-xingxing star-y" id="comment_1" onclick="change(1)"></span>
            <span class="iconfont icon-xingxing star-y" id="comment_2" onclick="change(2)"></span>
            <span class="iconfont icon-xingxing star-y" id="comment_3" onclick="change(3)"></span>
            <span class="iconfont icon-xingxing star-y" id="comment_4" onclick="change(4)"></span>
            <span class="iconfont icon-xingxing star-y" id="comment_5" onclick="change(5)"></span>
        </p>
        <input type="hidden"  id="point_id" value="{BEESCRM:$point_id}"/>
        <textarea class="textarea" id="comment" placeholder="说说我的感受，提点小小的建议~"></textarea>
        <div>
            <a href="javascript:void(0)" class="big-btn btn fl-left bg-color8" id="publish">发表评论</a>
        </div>
    </div>
    <div class="pop clearfix" id="appointment">
        <div class="prize picture white fl-left">
            <if condition="$firstFlash">
                <img src="{BEESCRM:$firstFlash}"/>
                <else/>
                <img src="/assets/activity/footprint/images/center-bg.jpg"/>
            </if>
        </div>

            <p class="prize-name fl-left">
                <span>{BEESCRM:$data.name}</span>
                <span>最多参观人数（{BEESCRM:$sumNum}人）</span>
            </p>
            <span class="iconfont icon-guanbi guanbi"></span>
            <div class="order-box fl-left">
                <p class="grade">选择参观时间</p>
                <volist name="time" id="vo">

	                <div class='time-box fl-left <if condition="$vo['remain'] neq 0">select-time</if>' data-remain="{BEESCRM:$vo.remain}" data-time="{BEESCRM:$vo.time}">
	                    <p>{BEESCRM:$vo.time|date='m月d日',###}</p>
	                    <p><if condition="date('H',$vo['time']) lt 12">上午<else/>下午</if>{BEESCRM:$vo.time|date='H:i',###}</p>
	                    <p>（<span class="text-color10">{BEESCRM:$vo.count}</span>/{BEESCRM:$vo.max_num}）</p>
	                    <if condition="$vo['remain'] eq 0">
	                    	<div class="full">名额已满</div>
	                    </if>
	                </div>
	            </volist>

                <input class="input" type="text" id='number' placeholder="请填写参观人数" />
                <input class="input" type="text" id='visitor' placeholder="姓名"/>
                <input class="input" type="text" id='mobile' placeholder="电话"/>
            </div>
            <div>
                <a href="javascript:void(0)" class="big-btn btn fl-left bg-color8" id="submit">确认提交</a>
            </div>
        </div>
    </div>
    <div class="pop-box" id="success">
        <span class="iconfont icon-duigou duigou" style="font-size: 60px"></span>
        <div class="main">
            <p class="warming">预约成功</p>
            <p>恭喜，您已成功预定本体验的席位！</p>
            <p>需满团才能开启体验之旅，如人数不足，工作人员将与您电话联系。</p>
            <p>客服电话 0571-87019367</p>
            <div>
                <a class="share-btn" id="goback">返回体验点</a>
                <a href="{BEESCRM::U('activity/footprint/ucenter',array('act_id'=>$act_id,'wechat_id'=>$wechat_id,'route'=>1))}" class="share-btn" id="gohome">前往个人中心</a>
            </div>
        </div>
    </div>
    <div class="pop-box" id="sharebox">
        <div class="share"><img src="/assets/activity/footprint/images/share.png"/></div>
        <div class="main">
            <p class="warming">分享朋友圈</p>
            <p>加入城市体验之旅，创造</p>
            <p>属于我们的记忆</p>
            <a class="share-btn">火速分享</a>
        </div>
    </div>
</div>

<script src="/assets/activity/footprint/js/jquery-2.1.0.min.js"></script>
<script src="/assets/activity/footprint/js/iscroll4.1.9.js"></script>
<script type="text/javascript">
	$('.full').show();
    $('.select-time').on('click',function(){
        $(this).addClass('select_time_actived').siblings('.select-time').removeClass('select_time_actived');
    });

    $('#share').click(function(){
        $('#sharebox').show();
    });
    $('.share-btn').click(function(){
        $('#sharebox').hide();
    });

    $('#goback').on('click',function(){
        window.location.reload();
    });
    //预约报名
    $(document).ready(function(){
        $(document).on('click','#submit',function(){
            var number=$('#number').val();
            var visitor=$('#visitor').val();
            var mobile=$('#mobile').val();
            var remain=$('.select_time_actived').data('remain');
            var time=$('.select_time_actived').data('time');
            var pid="{BEESCRM:$point_id}";
            var fans_id="{BEESCRM:$fans_id}";
            var name="{BEESCRM:$data.name}";
            var wechat_id="{BEESCRM:$wechat_id}";
            var act_id="{BEESCRM:$act_id}";
            var myreg = /^0?1[3|4|5|8][0-9]\d{8}$/;
            if(!time){
                infotips('请选择预约时间',$('.submit_tips'));return;
            }else if(!number || isNaN(number)){
                infotips('请填写正确的参观人数',$('.submit_tips'));return;
            }else if(Number(number)>Number(remain)){
                infotips('名额不足',$('.submit_tips'));return;
            }else if(!visitor){
                infotips('请输入姓名',$('.submit_tips'));return;
            }else if(!myreg.test(mobile)){
                infotips('请输入正确的手机号',$('.submit_tips'));return;
            }

            $.ajax({
                type:'json',
                method:'post',
                url:'/activity/footprint/addAppoint/act_id/'+act_id+'/wechat_id/'+wechat_id,
                data:{
                    'type':1,
                    'pid':pid,
                    'fans_id':fans_id,
                    'visitor':visitor,
                    'name':name,
                    'mobile':mobile,
                    'number':number,
                    'visit_time':time,
                    'wechat_id':wechat_id,
                    'act_id':act_id,
                },
                success:function(data){
                    var json;
                    json=$.parseJSON(data)
                    if(json.status=='S'){
                        infotips(json.message,$('.submit_tips'),'right');
                        $('#success').show();
                    }else{
                        infotips(json.message,$('.submit_tips'));
                    }
                },
                error:function(){
                    infotips('通讯错误',$('.submit_tips'));
                }
            });
            $('#appointment').hide();

        });
    });


    var myScroll;
    function loaded() {
        myScroll = new iScroll('wrapper', {
            snap: true,
            momentum: false,
            hScrollbar: false,
            onScrollEnd: function () {
                document.querySelector('#indicator > li.active').className = '';
                document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
            }
        });
    }
    document.addEventListener('DOMContentLoaded', loaded, false);

    var count = document.getElementById("thelist").getElementsByTagName("img").length;

    for(i=0;i<count;i++){
        document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";

    }
    document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";

    setInterval(function(){
        myScroll.scrollToPage('next', 0,400,count);
    },3500 );
    window.onresize = function(){
        for(i=0;i<count;i++){
            document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:"+document.body.clientWidth+"px";
        }
        document.getElementById("scroller").style.cssText = " width:"+document.body.clientWidth*count+"px";
    }

    $('.tab-detail').not(':first').hide();
    $('.tab').on('click','.tab-list', function () {
        var idx = $(this).index();
        $(this).addClass('cur').siblings().removeClass('cur');
        $('.tab-detail').eq(idx).show().siblings('.tab-detail').hide()
    });

    $('#isay').click(function(){
        $('#only-cover').show();
        $('#commend').addClass('up');
    });
    $('.guanbi').click(function(){
        $('#commend').removeClass('up');
        $('#appointment').removeClass('up');
        $('#only-cover').fadeOut(500);
    });
    $('#order').click(function(){
        $('#only-cover').show();
        $('#appointment').addClass('up');
    });
  /*  $('.guanbi').click(function(){
        $('#appointment').slideUp();
        $('#only-cover').hide();
    });*/

    $('#goback').click(function(){
        $('#success').hide()
    });
    $('#gohome').click(function(){
        $('#success').hide()
    });
    function change(aid) {
        for (i = 1; i <= aid; i++) {
            $('#comment_' + i).removeClass('star-n').addClass('star-y');
        }
        for (i = 5; i > aid; i--) {
            $('#comment_' + i).removeClass('star-y').addClass('star-n');
        }
        $('#star').val(aid);
    }
    $(document).on('click','#publish',function(){
        var star = $('#star').val();
        var point_id = $('#point_id').val();
        var comment = $('#comment').val();
        comment = comment.replace(/^\s+|\s+$/g,"");
        if(!comment){
            infotips('评论内容不能为空',$('.submit_tips'));
            return false;
        }
        $.ajax({
            type:'post',
            dataType:'json',
            data:{'point_id':point_id,'star':star,'comment':comment},
            url:"{BEESCRM::U('/Activity/Footprint/addComment',array('wechat_id'=>$wechat_id,'act_id'=>$act_id))}",
            success:function(data){
                if(data.status == 'S'){
                    //console.log(data);
                    infotips('评论成功',$('.submit_tips'),'right');
                    $('#comment-list').append(data.html);
                    $('#comment').val('');
                    $('#commend').hide();
                    $('#sumComment').html('评论 （ '+data.sum+'）');
                    window.location.reload();
                }else{
                    infotips('通讯错误',$('.submit_tips'));
                }
            },
            error:function(){
                infotips('通讯错误',$('.submit_tips'));
            },
        });
    });
</script>
</body>

</html>
